<template>
    <h2 style="text-align:center">确认出库新增</h2>
    <div style="background-color:gainsboro">
        <br>
        <el-form ref="ruleFormRef" style="text-align:center" :model="ruleForm" :rules="rules" class="demo-ruleForm"
            :size="formSize" status-icon>
            <table style="width:100%;text-align:center">
                <tr style="text-align:center">
                    <td>
                        <el-form-item label="出库库管" prop="manpowerIds">
                            <el-input v-model="ruleForm.manpowerIds" @dblclick="dialogVisible4 = true"
                                :disabled="true" />
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="出库编号" prop="outboundNumber">
                            <el-input v-model="ruleForm.dtos.outboundNumber" :disabled="true" />
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="申请人员" prop="oRapplicationPeople">
                            <el-input v-model="ruleForm.dtos.oRapplicationPeople" :disabled="true" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="申请时间" prop="oRapplicationDate">
                            <el-input type="date" v-model="ruleForm.dtos.oRapplicationDate" :disabled="true" />
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="出库类别" prop="orOutType">
                            <el-select v-model="ruleForm.dtos.orOutType" placeholder="请选择出库类别" :disabled="true">
                                <el-option label="销售出库" value="销售出库" />
                                <el-option label="物料出库" value="物料出库" />
                                <el-option label="其他出库" value="其他出库" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="手机号码" prop="orPhone">
                            <el-input v-model="ruleForm.dtos.orPhone" :disabled="true" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>

                    <td>
                        <el-form-item label="所在省份" prop="provinceId">
                            <el-select v-model="ruleForm.dtos.provinceId" placeholder="请选择所在省份" :disabled="true">
                                <el-option v-for="a in Province" :label="a.provinceName" :value="a.provinceId"
                                    @click="getCity(a.provinceId)" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="所在城市" prop="cityId">
                            <el-select v-model="ruleForm.dtos.cityId" placeholder="请选择所在城市" :disabled="true">
                                <el-option v-for="a in City" :label="a.cityName" :value="a.cityId" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="详细地址" prop="orAddress">
                            <el-input v-model="ruleForm.dtos.orAddress" :disabled="true" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="收货人员" prop="orConsignee" v-show="ruleForm.dtos.orOutType === '销售出库'">
                            <el-input v-model="ruleForm.dtos.orConsignee" :disabled="true" />
                        </el-form-item>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </el-form>
        <br>
    </div>
    <br>
    <el-divider />
    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>申请出库数量</th>
                <th>确认出库数</th>
                <th>出库产品单价</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check1" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogoppo(ruleForm.dtos.orOutType)" :disabled="true" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.orQuantityNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.ouTnum" v-if="item.orQuantityNum==item.ouTnum" :disabled="true"  type="text" style="height: 40px;width: 100%;text-align: center;" />
                    <input v-model="item.ouTnum" v-else type="text" style="height: 40px;width: 100%;text-align: center;" />
                </td>
                <td><input v-model="item.orqPrice" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <el-button type="primary" @click="submitForm()">
        修改
    </el-button>

    <!-- 其他出库 -->
    <el-dialog v-model="dialogVisible3" title="其他产品选择" width="1200" style="height: 800px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="tableDatas" border style="width: 100%" @selection-change="handleSelectionChangeProducts">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="productId" label="序号" width="100" align="center" />
                <el-table-column prop="pCharacteristic" label="标识" width="100" align="center" />
                <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                <el-table-column prop="pName" label="物品名称" align="center" />
                <el-table-column prop="ptClass" label="所属类别" align="center" />
                <el-table-column prop="pSpec" label="规格型号" align="center" />
                <el-table-column prop="pUnit" label="单位" align="center" />
            </el-table>
            <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout="total, slot,sizes" :total="qitaPage.sumCount">
                            ，当前是{{ qitaPage.PageIndex }}/{{ qitaPage.pageLast }}页，每页{{ qitaPage.PageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout=" slot, prev, pager, next" :total="qitaPage.sumCount">
                            <el-button :disabled="qitaPage.PageIndex == 1"
                                @click="qitaPage.PageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout=" slot, jumper" :total="qitaPage.sumCount">
                            <el-button :disabled="qitaPage.PageIndex == qitaPage.sumCount"
                                @click="qitaPage.PageIndex = qitaPage.pageLast">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
            <!-- 保存按钮 -->
            <br>
            <el-button type="success" @click="dialogVisible3 = false">保存</el-button>
        </template>
    </el-dialog>
    <!-- 物料出库 -->
    <el-dialog v-model="dialogVisible5" title="物料产品选择" width="900" style="height: 500px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="tableDatawuliao" style="width:800px" @selection-change="handleSelectionChangewuliao">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="mSubject" label="物料清单主题" width="180" />
                <el-table-column prop="materialNode" label="物料清单编码" width="180" />
                <el-table-column prop="mpName" label="产品名称" />
                <el-table-column label="制单日期">
                    <template #default="scope">
                        <sapan>{{ scope.row.addTime.substring(0, 10) }}</sapan>
                    </template>
                </el-table-column>
                <el-table-column prop="mWatchmakers" label="制单人员" />
            </el-table>
            <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="formInline.pageIndex"
                            v-model:page-size="formInline.pageSize" prev-text="上一页" next-text="下一页"
                            :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                            :total="formInline.totalCount">
                            ，当前是{{ formInline.pageIndex }}/{{ formInline.pageCount }}页，每页{{ formInline.pageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.pageIndex"
                            v-model:page-size="formInline.pageSize" prev-text="上一页" next-text="下一页"
                            :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                            :total="formInline.totalCount">
                            <el-button :disabled="formInline.pageIndex == 1"
                                @click="formInline.pageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.pageIndex"
                            v-model:page-size="formInline.pageSize" prev-text="上一页" next-text="下一页"
                            :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                            :total="formInline.totalCount">
                            <el-button :disabled="formInline.pageIndex == formInline.totalCount"
                                @click="formInline.pageIndex = formInline.pageCount">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
            <!-- 保存按钮 -->
            <br>
            <el-button type="success" @click="dialogVisible5 = false">保存</el-button>
        </template>
    </el-dialog>
    <!-- 销售出库 -->
    <el-dialog v-model="dialogVisible6" title="销售产品选择" width="900" style="height: 1000px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="tableDatas" border style="width: 100%" @selection-change="handleSelectionChangeProducts">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="productId" label="序号" width="100" align="center" />
                <el-table-column prop="pCharacteristic" label="标识" width="100" align="center" />
                <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                <el-table-column prop="pName" label="物品名称" align="center" />
                <el-table-column prop="ptClass" label="所属类别" align="center" />
                <el-table-column prop="pSpec" label="规格型号" align="center" />
                <el-table-column prop="pUnit" label="单位" align="center" />
            </el-table>
            <!-- 保存按钮 -->
            <br>
            <el-button type="success" @click="dialogVisible3 = false">保存</el-button>
        </template>
    </el-dialog>

    <!-- 出库库管弹出层 -->
    <el-dialog v-model="dialogVisible4" title="库管选择" width="700" style="max-height: 1000px;"
        :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChangepeople">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="mNumber" label="档案编号" align="center" />
                <el-table-column prop="mName" label="真实姓名" align="center" />
                <el-table-column prop="users" label="登录账号" align="center" />
                <el-table-column prop="mSex" label="性别" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mSex == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="mPhone" label="联系电话" align="center" />
                <el-table-column prop="mBirthDay" label="出生日期" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mBirthDay.substring(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sectorName" label="所在部门" align="center" />
                <el-table-column prop="postName" label="所在岗位" align="center" />
            </el-table>
            <el-button type="success" @click="dialogVisible4 = false">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import http from '../../../http.js';
import { fa } from 'element-plus/es/locales.mjs';
import { useRouter } from 'vue-router';
const router = useRouter()

import { useRoute } from 'vue-router';
const route = useRoute()

onMounted(() => {
    table()
    GetManpowerList()
    getProvince()
    GetProduct()
    orFan()
    wuliaoShow()
})

//表单参数
const ruleForm = reactive({
    manpowerIds: '',
    "dtos": {
        "outboundRequestId": '',
        "manpowerId": '',
        "manpowerName": "",
        "outboundNumber": "",
        "oRapplicationPeople": localStorage.getItem("UserName"),
        "oRapplicationDate": "",
        "orOutType": "",
        "orConsignee": "",
        "orPhone": "",
        "provinceId": '',
        "cityId": '',
        "orAddress": "",
        "orTotalAmount": '',
        "orOutNum": '',
        "addName": "string",
        "orIsState": '',
        "updName": "string",
        "updTime": "2024-12-25T03:25:24.642Z",
        "addTime": "2024-12-25T03:25:24.643Z",
        "delName": "string",
        "delTime": "2024-12-25T03:25:24.643Z",
        "isDel": false,
        "office_Id": "string",
        "user_Id": 0,
        "oroDto": [
            {
                outboundRProductId: '',
                "productId": 0,
                "outboundNumber": "",
                "orQuantityNum": '',
                "ouTnum": '',
                "orqPrice": '',
                "addName": "string",
                "addTime": "2024-12-25T03:25:24.643Z",
                "delName": "string",
                "delTime": "2024-12-25T03:25:24.643Z",
                "updName": "string",
                "updTime": "2024-12-25T03:25:24.643Z",
                "isDel": false,
                "office_Id": "string",
                "user_Id": 0
            }
        ]
    }
})

// 新增
const submitForm = () => {
    console.log(check1.value)
    let code = 0;
    check1.value.forEach(item => {
        if (item.ouTnum > item.orQuantityNum) {
            code = 1;
            return
        }
    })
    if (code == 1) {
        ElMessage.error("数量不能大于可出库数量")
        return
    } else {
        axios.post(http.zblnb + '/erpck/api/OutboundShipments/ProcureEnquiryUpdateOk', {
            dtos: check1.value
        })
            .then((res) => {
                if (res.data.data == 1) {
                    ElMessage.success("定价成功")
                } else {
                    ElMessage.error("定价失败")
                }
            })
    }

}


//多选框
const check1 = ref([])
//全选
const ids = ref([])
const selectAll = ref(false)
const toggleSelectAll = () => {
    ids.value = []
    if (selectAll.value) {
        ids.value = check1.value.map(ele => ele.productId)
    }

}
const dialogVisible3 = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

//点击新增行
const addhang = () => {
    check1.value.push({
        outboundRProductId: '',
        pName: '',
        pNumber: '',
        orQuantityNum: '',
        ouTnum: '',
        orqPrice: '',
    });
}
//供应商显示
var tableDataven = ref([]);
const table = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelectShow', {
        params: {
            PageIndex: 1,
            PageSize: 100
        }
    }).then(res => {
        if (res.data.code == 200) {
            tableDataven.value = res.data.data.list
        }
    })
}

const dialogVisible4 = ref(false)
//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: 1,
            Psize: 100
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
        })
}

//多选框
const handleSelectionChangepeople = (val: User[]) => {
    ruleForm.manpowerIds = val[0].mName
    ruleForm.dtos.manpowerId = val[0].manpowerId
}

//省份
var Province = ref([]);
const getProvince = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProvinceSelect').then(res => {
        if (res.data.code == 200) {
            Province.value = res.data.data

        }
    })
}
//城市
var City = ref([]);
const getCity = (id: number) => {
    axios.get(http.zblnb + '/cg/api/Vendor/CitySelect?ProvinceId=' + id).then(res => {
        if (res.data.code == 200) {
            City.value = res.data.data
        }
    });
}

///获取其他产品列表
const qitaPage = ref({
    PageIndex: 1,
    PageSize: 10,
    sumCount: 0,
    pageLast: 0
})

watch(qitaPage.value, () => {
    GetProduct()
})
const tableDatas = ref([])
const GetProduct = () => {
    axios.get(http.zblnb + '/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: qitaPage.value.PageIndex,
            PageSize: qitaPage.value.PageSize,
        }
    })
        .then(res => {
            tableDatas.value = res.data.data.list
            qitaPage.value.sumCount = res.data.data.sumCount
            qitaPage.value.pageLast = res.data.data.pageLast
        })
        .catch(err => {
            console.log(err)
        })
}

//多选框赋值
const handleSelectionChangeProducts = (val: any) => {
    val.forEach((item: any) => {
        check1.value.push({
            productId: item.productId,
            pName: item.pName,
            pNumber: item.pNumber,
            orQuantityNum: item.orQuantityNum,
            orqPrice: item.orqPrice
        })
    })
}


const dialogVisible5 = ref(false)
const dialogVisible6 = ref(false)
const dialogoppo = (name: any) => {
    if (name == '其他出库') {
        dialogVisible3.value = true
    } else if (name == '物料出库') {
        dialogVisible5.value = true
    } else if (name == '销售出库') {
        dialogVisible6.value = true
    }
}

//物料显示
const formInline = reactive({
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    pageCount: 0
})
watch(formInline, () => {
    wuliaoShow()
})
const tableDatawuliao = ref([])
const wuliaoShow = () => {
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            Office_Id: 1,
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize
        }

    }).then(res => {
        tableDatawuliao.value = res.data.data.list
        formInline.totalCount = res.data.data.totalcount
        formInline.pageCount = res.data.data.pagecount
    })

}

const handleSelectionChangewuliao = (val: any) => {
    val.forEach((item: any) => {
        check1.value.push({
            productId: item.productId,
            pName: item.pName,
            pNumber: item.pNumber,
            orQuantityNum: item.orQuantityNum,
            orqPrice: item.orqPrice
        })
    })
}

//反填
const orFan = () => {
    axios.get(http.zblnb + "/erpck/api/OutboundShipments/ProcureEnquirySetInfo?id=" + route.query.id)
        .then(res => {
            let a = res.data.data
            ruleForm.manpowerIds = a.manpowerName
            ruleForm.dtos.outboundNumber = a.outboundNumber
            ruleForm.dtos.oRapplicationDate = a.oRapplicationDate
            ruleForm.dtos.orOutType = a.orOutType
            ruleForm.dtos.orPhone = a.orPhone
            ruleForm.dtos.provinceId = a.provinceId
            getCity(a.provinceId)
            ruleForm.dtos.cityId = a.cityId
            ruleForm.dtos.orAddress = a.orAddress
            ruleForm.dtos.outboundRequestId = a.outboundRequestId
            ruleForm.dtos.orConsignee = a.orConsignee
            ruleForm.dtos.manpowerId = a.manpowerId
            ruleForm.dtos.manpowerName = a.manpowerName
            ruleForm.dtos.user_Id = a.user_Id
            ruleForm.dtos.orTotalAmount = a.orTotalAmount
            ruleForm.dtos.orOutNum = a.orOutNum
            ruleForm.dtos.office_Id = a.office_Id
            ruleForm.dtos.addName = a.addName
            ruleForm.dtos.delTime = a.delTime
            ruleForm.dtos.addTime = a.addTime
            ruleForm.dtos.delName = a.delName
            ruleForm.dtos.orIsState = a.orIsState
            ruleForm.dtos.oRapplicationPeople = a.oRapplicationPeople
            check1.value = a.oroDto
            console.log(check1.value)
        })
}
</script>

<style></style>